import AppletLogo from "@public/images/decoration/topo-bg.jpg";
import { ComponentInternalInstance } from "vue";
import "../applet.scss";
import { useRouter } from "vue-router";
import { screenRouter } from "@/routers/modules/common/screen";
import { saveLogo } from "@/api/modules/user";
import { GlobalStore } from "@/stores";
import { ElMessageBox } from "element-plus";
import { showTips } from "@/utils/util";
import { PublicStore } from "@/stores/modules/public";
export default defineComponent({
	setup() {
		const publicStore = PublicStore();
		const router = useRouter();
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const globalStore = GlobalStore();
		const custForm = reactive({
			systemName: globalStore.setting.systemName,
			logo: globalStore.setting.logo,
			home: globalStore.setting.home
		});
		onMounted(async () => {});

		return () => {
			return (
				<div class="applet-dashboard grid grid-cols-4 gap-4">
					{screenRouter.map((item: any) => {
						return (
							<el-card body-style="padding: 0px" shadow="hover">
								<div class="applet-card h-full flex flex-col">
									<div class="flex-1">
										<el-image
											style="height:256px;width:100%"
											src={item.meta.img ? item.meta.img : AppletLogo}
											fit="fill"
										></el-image>
									</div>
									<div class="flex w-full justify-between bg-white ">
										<div class="font-semibold title">{item.meta.title || ""}</div>
										<div class="title">
											{item.meta.tag.map((item: any) => {
												return <el-tag type={item.type}> {item.name}</el-tag>;
											})}
										</div>
									</div>
									<div class="applet-container">
										<div class="goto-btn flex">
											<el-button
												type="primary"
												onClick={() => {
													ElMessageBox.confirm("是否修改大屏?", "温馨提示", {
														confirmButtonText: "确定",
														cancelButtonText: "取消",
														type: "warning"
													}).then(async () => {
														custForm.home = item.path;
														let { code, message } = await saveLogo(custForm);
														let ok = showTips(code, "修改大屏", message);
														if (ok) {
															globalStore.setHome(item.path);
															location.reload();
														}
													});
												}}
											>
												{proxy?.$t("dashboard.btn.set_screen")}
												<i class="iconfont iconsettings1 ml-2" style="font-size:14px" />
											</el-button>
											<el-button
												type="primary"
												onClick={() => {
													let token = "";
													if (RegExp(/\?.+=.*/).test(globalStore.setting.home)) {
														token = `&token=${publicStore.token}`;
													} else {
														token = `?token=${publicStore.token}`;
													}
													const href = router.resolve({
														path: item.path
													});
													window.open(item.meta.url ? item.meta.url + token : href.href, "_blank");
												}}
											>
												{proxy?.$t("dashboard.btn.preview_screen")}
												<i class="iconfont iconarrow-right ml-2" style="font-size:14px" />
											</el-button>
										</div>
									</div>
								</div>
							</el-card>
						);
					})}
				</div>
			);
		};
	}
});
